<template>
  <div v-if="hasItemSlot">
    {{items}}
    <template v-for="item in items">
      <slot name="item" :item="item"/>
    </template>
  </div>
  <slot v-else-if="hasDefaultSlot" :title="title" :items="items"></slot>
  <span v-else>{{title}}</span>
</template>
<script setup>
import {heyuiConfig} from 'HeyUI'
import {useSlots, ref,watch} from "vue"
const slots=useSlots()
const hasDefaultSlot = !!slots.default
const hasItemSlot = !!slots.item
const title=ref()
const props=defineProps({
  value:String,
  dict:String
})
const items=ref([])
if(props.value){
  title.value=heyuiConfig.dictMapping(props.value,props.dict)
}

watch(()=>props.value,()=>{
  title.value=heyuiConfig.dictMapping(props.value,props.dict)
})
if(hasDefaultSlot||hasItemSlot){
  let dict=heyuiConfig.getDict(props.dict)
  if(dict instanceof Promise){
    dict.then(r=>{
      items.value=r
    })
  }else{
    items.value=dict
  }

}
</script>
